<template>
  <div class="data">
    <div class="edit">
      <div>
        <van-icon
          name="arrow-left"
          @click="fh"
           style="
            float: left;
            font-size: 20px;
            margin-left: 10px;
            margin-top: 10px;
          "
        />
      </div>
      <div class="edit_data">编辑资料</div>
    </div>
    <div class="head">
      <img src="../../assets/01.webp" alt="" />
    </div>
    <div class="name">
      <div class="ursename">
        <div class="resume" @click="name">
          名字
          <p>
            <span id="num_one"></span>
            <van-icon
              name="arrow"
              style="font-size: 20px; margin-left: 10px; margin-top: 10px"
            />
          </p>
        </div>
        <div class="resume" @click="bank">
          小红书号
          <p>
            <span id="num_two"></span>
            <van-icon
              name="arrow"
              style="font-size: 20px; margin-left: 10px; margin-top: 10px"
            />
          </p>
        </div>
        <div class="resume" @click="brief">
          简介
          <p>
            有趣的简历可以吸引粉丝
            <van-icon
              name="arrow"
              style="font-size: 20px; margin-left: 10px; margin-top: 10px"
            />
          </p>
        </div>

        <div class="resume" @click="sex">
          性别
          <p>
            <span id="num_three"></span>
            <van-icon
              name="arrow"
              style="font-size: 20px; margin-left: 10px; margin-top: 10px"
            />
          </p>
        </div>

        <div class="resume" @click="data">
          生日
          <p>
            选择生日<van-icon
              name="arrow"
              style="font-size: 20px; margin-left: 10px; margin-top: 10px"
            />
          </p>
        </div>

        <div class="resume">
          地区
          <p>
            选择你所在的地区
            <van-icon
              name="arrow"
              style="font-size: 20px; margin-left: 10px; margin-top: 10px"
            />
          </p>
        </div>
        <div class="resume">
          职业
          <p>
            选择职业<van-icon
              name="arrow"
              style="font-size: 20px; margin-left: 10px; margin-top: 10px"
            />
          </p>
        </div>
        <div class="resume">
          学校
          <p>
            选择学校<van-icon
              name="arrow"
              style="font-size: 20px; margin-left: 10px; margin-top: 10px"
            />
          </p>
        </div>
        <div class="resume">
          背景图
          <p>
            上传主页背景图
            <van-icon
              name="arrow"
              style="font-size: 20px; margin-left: 10px; margin-top: 10px"
            />
          </p>
        </div>
      </div>
    </div>
    <div class="information">
      <div class="message">
        <p>更多信息</p>
        <p class="siz">(仅自己可见)</p>
      </div>
      <div class="style">
        我穿搭信息
        <p>
          点击填写
          <van-icon
            name="arrow"
            style="font-size: 20px; margin-left: 10px; margin-top: 10px"
          />
        </p>
      </div>
      <div class="style">
        二维码
        <van-icon
          name="arrow"
          style="font-size: 20px; margin-left: 10px; margin-top: 10px"
        />
      </div>
      <div class="style">
        成长等级
        <p>
          <van-icon
            name="arrow"
            style="font-size: 20px; margin-left: 10px; margin-top: 10px"
          />
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import {data_all} from '../../api/personal'
export default {
  data() {
    return {};  
  },

  mounted() {
    this.cha_all()
  },
  methods: {
    //点击名字时跳转页面
    name() {
      this.$router.push("/Change_name");
    },
    // 点击性别
    sex() {
      this.$router.push("/Sex");
    },
    fh() {
      this.$router.go(-1);
    },
    // 点击修改小红书号
    bank() {
      this.$router.push("/Bank");
    },
    brief() {
      this.$router.push("/Brief");
    },
    // 跳转生日
    data() {
      this.$router.push("/Datetime");
    },

    cha_all() {
      data_all({
        uid:1
      }).then((res) => {
        console.log(res);
      }).catch((rest) => {
        console.log(rest);
      })
    }

    // 页面接口
    // bao(){
    //     Change_name({
    //       uid: 1,
    //       name:"我你爹"
    //     }).then((res) => {
    //       console.log(res);
    //     }).catch((rest) => {
    //       console.log(123);
    //     })
    //   },
  },
};
</script>

<style scoped>
div {
  color: gray;
  font-size: 16px;
}
.data {
  width: 390px;
  height: 844px;
}

.edit {
  margin-top: 20px;
  display: flex;
  font-size: 18px;
  padding: 10px;
}

.edit_data {
  margin-left: 125px;
}

.head {
  /* margin-top: 30px; */
  width: 390px;
  display: flex;
}

.head img {
  width: 80px;
  height: 80px;
  margin: 0 auto;
  border-radius: 50%;
}

.name {
  width: 390px;
}

.ursename {
  width: 390px;
}

.resume {
  margin: 0 auto;
  width: 330px;
  display: flex;
  height: 50px;
  justify-content: space-between;
  align-items: center;
  padding-left: 15px;
  border-bottom: 1px solid rgb(98, 98, 98);
}

.resume {
  color: gray;
  font-size: 16px;
}

.resume p {
  color: grey;
}

.information {
  margin-top: 20px;
  padding-left: 15px;
  width: 330px;
  height: 30px;
  margin: 30px 15px;
}

.message {
  display: flex;
  height: 30px;
}

.style {
  display: flex;
  height: 50px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgb(98, 98, 98);
}

.style {
  color: gray;
}

.style p {
  color: gray;
}

.siz {
  color: gray;
  font-size: 15px;
}

.style img {
  width: 22px;
  height: 22px;
}
</style>